<template>
	<view>
		<uni-nav-bar title="主播选择" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<scroll-view scroll-y="true" :style="{height: setcollapseheight() - 30 + 'px'}" :scroll-top="scrollTop"
			@scroll="onScroll" @scrolltolower="handleScrolltolowerone()">
			<view class="main">
				<view class="item" v-for="(item,index) in anchorList" :key="index" @click="back(item)">
					<view class="left">
						<image :src="item.personPicture" v-if="item.personPicture"></image>
					</view>
					<view class="right">
						<view class="name">
							{{item.serviceName}}
						</view>
						<view class="type">
							<image src="../../../../../static/play.png" mode="" class="img"></image>
							<view class="typeTitle">
								带货次数：
							</view>
							<view class="typeValue">
								{{item.finishOrderNum}}
							</view>
						</view>
						<view class="time">
							<image src="../../../../../static/datetime.png" mode="" class="img"></image>
							<view class="typeTitle">
								带货时间：
							</view>
							<view class="typeValue">
								<template v-if="item.liveTimeBegin && item.liveTimeEnd">
									{{item.liveTimeBegin}}-{{item.liveTimeEnd}}
								</template>
							</view>
						</view>
					</view>
					<view class="price">
						{{item.unitPrice}}元/次
					</view>
					<view class="line"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/user/selectAnchor/index.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				oldScrollTop: 0,
				anchorList: [],
				product: ''
			}
		},
		onLoad(e) {
			this.product = e.product
		},
		created() {
			this.queryAnchor()
		},
		methods: {
			async queryAnchor() {
				let params = {
					richEntity: true,
					svcClassId: 23,
					enable: true
				}
				let res = await API.queryAnchor(params)
				if(res.code === 200) {
					res.data.forEach(item=>{
						let params = {}
						item.serviceProperties.forEach(item1=>{
							if(item.finishOrderNum) {
								params['finishOrderNum'] = item.finishOrderNum
							} else {
								params['finishOrderNum'] = 0
							}
							if(item1.expression === 'liveTimeBegin') {
								params['liveTimeBegin'] = item1.textValue
								params['svcObjId'] = item1.svcObjId
							}
							if(item1.expression === 'liveTimeEnd') {
								params['liveTimeEnd'] = item1.textValue
							}
							if(item1.expression === 'serviceName') {
								params['serviceName'] = item1.textValue
							}
							if(item1.expression === 'unitPrice') {
								params['unitPrice'] = item1.numValue
							}
							if(item1.expression === 'goodsPicture') {
								params['goodsPicture'] = item1.textValue
							}
							if(item1.expression === 'servicePhone') {
								params['servicePhone'] = item1.textValue
							}
							if(item1.expression === 'personPicture') {
								params['personPicture'] = item1.textValue
							}
							if(item1.expression === 'anchorNo') {
								params['anchorNo'] = item1.textValue
							}
						})
						this.anchorList.push(params)
					})
				}
			},
			back(item) {
				let {
					product
				} = this
				let params = {product}
				if(item) {
					params['anchorName'] = item.serviceName
					params['anchorId'] = item.anchorNo
					params['liveTimeBegin'] = item.liveTimeBegin
					params['liveTimeEnd'] = item.liveTimeEnd
					params['svcObjId'] = item.svcObjId
					params['anchorPrice'] = item.unitPrice
				}
				let url = '/subPage1/socialized-service/farm-service/order/order'
				this.$togo(url, params)
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(260)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 26rpx 40rpx 0 40rpx;
		font-size: 28rpx;
		.item {
			position: relative;
			display: flex;
			padding: 20rpx;
			padding-bottom: 36rpx;
			margin-bottom: 18rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.05);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			
			.left {
				height: 132rpx;
				width: 134rpx;
				image {
					height: 100%;
					width: 100%;
					clip-path: circle(50%);
				}
			}
			
			.right {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				.name {
					font-size: 28rpx;
					color: #000000;
				}
				
				.type,.time {
					display: flex;
					color: #606060;
					
					.img {
						height: 31rpx;
						width: 32rpx;
						margin-right: 24rpx;
					}
					.typeTitle {
						color: #606060;
					}
					.typeValue {
						color: #434343;
					}
				}
			}
			
			.price {
				position: absolute;
				right: 20rpx;
				color: red;
			}
			
			.line {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 90%;
				height: 4rpx;
				background: linear-gradient(90deg, #2165FF 0%, #88ACFF 100%);
			}
		}
	}
</style>